"use client"

import { useEffect, useState } from 'react';

export default function Book() {
    const [books, setBooks] = useState([]);

    useEffect(() => {
        // 从 API 路由获取书籍数据
        fetch('/api/book')
            .then((response) => response.json())
            .then((data) => setBooks(data.books))
            .catch((error) => console.error('Error fetching books:', error));
    }, []);


    //   {
    //     id: 19,
    //     title: '深入REACT技术栈',
    //     sort: '深入REACT技术栈',
    //     timestamp: '2023-10-23 18:57:03.078947+00:00',
    //     pubdate: '2017-02-17 09:32:05+00:00',
    //     series_index: 1,
    //     author_sort: '未知',
    //     isbn: '',
    //     lccn: '',
    //     path: 'Wei Zhi/Shen Ru REACTJi Zhu Zhan (19)',
    //     flags: 1,
    //     uuid: 'be8336fa-684d-4087-b361-26415b0a5613',
    //     has_cover: 1,
    //     last_modified: '2023-10-23 18:57:03.154180+00:00'
    //   }

    return (
        <div>
            {/* <h1>My Calibre Library</h1> */}
            {/* <ul>
                {books.map((book) => (
                    <li key={book.id}>
                        <h2>{book.title}</h2>
                        <p>Author: {book.authors}</p>
                        <p>Published: {new Date(book.pubdate).toLocaleDateString()}</p>
                    </li>
                ))}
            </ul> */}

            <div className="container mx-auto px-4 py-12">
                <div className="grid gap-6 md:grid-cols-3 lg:grid-cols-4">
                    {books.map((book) => (
                        <div key={book.title} className="bg-white overflow-hidden shadow-lg rounded-lg">
                            <div className="relative">
                                <img
                                    className="h-48 w-full object-cover"
                                    src={book.cover}
                                    alt={book.title}
                                />
                                <div className="absolute bottom-0 px-4 py-2 bg-gray-900 text-white opacity-75">
                                    <p className="text-sm font-bold">{book.author}</p>
                                </div>
                            </div>
                            <div className="p-6">
                                <h2 className="text-2xl font-bold text-gray-900">{book.title}</h2>
                                <p className="text-gray-500 text-sm">{book.author}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}